Vue.component('dong-page', {
	props: {
		totalNum: {
			type: Number,
			required: true
		},
		pageNum: {
			type: Number,
			default: 5
		},
		openNum: {
			type: Number,
			required: true
		},
		setNum: {
			type: Number,
			default: 1
		}
	},
	computed: {
		pages() {
			
			const totalPages = Math.ceil(this.totalNum / this.pageNum);

			

			const pages = [];
			for (let i = 1; i <= totalPages; i++) {
				pages.push(i);
			}
			return pages;
		}
	},
	methods: {
		left_page: function() {
			if (this.openNum > 1) {
				this.openNum--;
				this.$emit('page',this.openNum)
			}
		},
		right_page: function() {
			if (this.openNum < this.totalNum/this.pageNum) {
				this.openNum++;
				this.$emit('page',this.openNum)
			}
		},
		goToPage(page) {
		      // 在这里处理点击页码时的逻辑
			  this.openNum = page
			  
			  this.$emit('page',this.openNum)
		    }
	},
	template: `
	<div class="col-xl-12">
	<div class="d-sm-flex d-block align-items-center justify-content-between">
		<h4 class="mb-sm-0 mb-3"></h4>
	<nav>
		<ul class="pagination">
		
		
			<li class="page-item page-indicator">
				<a class="page-link" href="javascript:void(0)" @click="left_page">
					<i class="la la-angle-left"></i></a>
			</li>
			
			<li v-for="page in pages" :key="page" :class="{'page-item': true, active: page == openNum }">
			  <a class="page-link" @click="goToPage(page)">{{ page }}</a>
			</li>
			<li class="page-item page-indicator">
				<a class="page-link" href="javascript:void(0)" @click="right_page">
					<i class="la la-angle-right"></i></a>
			</li>
		</ul>
	</nav>
	</div>
	</div>					
  `
});